
import { ElDescriptions, ElDescriptionsItem } from "element-plus";
import { PropType, defineComponent, h } from "vue";
import { ColItem } from "./props";

/**
 * 详情核心组件,专用于详情展示使用
 */
export default defineComponent({
  props: {
    rows: Array as PropType<ColItem[]>
  },
  setup(props, { slots }) {
    return () => {
      if (!props.rows) return null;
      const content = props.rows
        .filter((i) => Boolean(i))
        .map((i) => {
          if (Array.isArray(i.value)) {
            const { value, label, ...otherInfo } = i;
            const ColsNode = value
              .filter((i) => Boolean(i))
              .map((innerItem) => {
                const { span, label, value } = innerItem;
                return h(
                  ElDescriptionsItem,
                  { span, label, labelAlign: 'right' },
                  { default: () => value || '--' }
                );
              });
            if (!ColsNode.length) return null;
            return h(
              ElDescriptions,
              { ...otherInfo },
              {
                default: () => ColsNode,
                title: () => h("div", { style: { color: 'var(--el-color-primary)' } }, label)
              }
            );
          } else return h("h4", { style: { color: 'var(--el-color-primary)' } }, i.value || '--');
        });
      return h("div",
        { class: "detail-frame-wrapper" },
        { default: () => [...content, slots.default] });
    }
  },
});
